<script setup lang="ts">
import useNavStore from "@/store/modules/nav.ts";

const NavStore = useNavStore()
</script>

<template>
  <div class="page-container">
    <div class="page-content"></div>
    <div class="page-btn">
      <button class="btn-next" @click="() => NavStore.goToHome()">回到首页</button>
      <button v-if="NavStore.hasLastRouter" class="btn-prev" @click="() => NavStore.goToLastRouter()">返回</button>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  height: 100vh;
  /*左右分布*/
  display: flex;
  align-items: center;
  justify-content: center;

  .page-content {
    width: 600px;
    height: 600px;
    background: url("src/assets/images/page/404.png") center;
    background-size: cover;
  }

  .page-btn {
    display: flex;
    /*上下展示*/
    flex-direction: column;


    .btn-next {
      height: 40px;
      background: #ef1111;
      color: #fff;
      border-radius: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
    }

    .btn-prev {
      height: 40px;
      background: #49b1f5;
      color: #fff;
      border-radius: 20px;
      padding: 0 20px;
    }
  }
}

</style>
